<template>
  <view class="page">
    <view class="page-head"> <statusBar></statusBar> 智能润滑 </view>
    <view
      class="head-polyfill"
      :style="{ height: statusBarHeight + 38 + 'px' }"
    ></view>
    <view class="device-status">
	  <image class="device-bg" :src="imgBaseUrlV2 + 'shebei_top_bg.png'" mode=""></image>
      <view class="check-box">
      	<view class="ft">
      	  <view class="text" @click="onShowFilter">
      	    {{ companyTag }}
      	    <image
      	      :src="imgBaseUrlV2 + 'arrow_down.png'"
      	      mode=""
      	      class="icon"
      	      :class="{ active: showFilter }"
      	    />
      	  </view>
      	  <view class="filter" v-show="showFilter">
      	    <view class="after"></view>
      	    <view class="options">
      	      <view
      	        class="option"
      	        v-for="(op, oIndex) in lineList"
      	        :key="oIndex"
      	        @click.stop="onConfirmFilter(op, oIndex)"
      	      >
      	        {{ op.factoryName + op.name}}
      	      </view>
      	    </view>
      	  </view>
      	</view>
		<view class="ft">
			<view class="text" @click="onShowLine">
			  {{ deviceTag }}
			  <image
			    :src="imgBaseUrlV2 + 'arrow_down.png'"
			    mode=""
			    class="icon"
			    :class="{ active: showLine }"
			  />
			</view>
			<view class="filter" v-show="showLine">
			  <view class="after"></view>
			  <view class="options">
			    <view
			      class="option"
			      v-for="(op, oIndex) in DeviceList"
			      :key="oIndex"
			      @click.stop="onOptionLine(op, oIndex)"
			    >
			      {{ op.name}}
			    </view>
			  </view>
			</view>
		</view>
      </view>
	  <view class="device">
	  	<view class="device-box">
	  		<view class="device-title">
				<image class="title-img" :src="imgBaseUrlV2+'list.png'" mode=""></image>
	  			{{deviceTag}}
	  		</view>
			<view class="bd">
				<view class="host">
					<view class="host-list" v-for="(host,index) in GearboxList" :key="host.id">
						<view class="list">
							<image class="rotate" :src="host.isWarning === 1? imgBaseUrlV2+ 'home_red_bg.png' :imgBaseUrlV2+ 'home_green_bg.png'" mode=""></image>
							<image class="host-img" :src="host.pic" mode=""></image>
						</view>
						<view class="info" >
						   <template v-for="(icon,index) in signList" >
						   	 <!-- <text>{{icon.name}}</text> -->
							 <image :key="index" class="icon" :src="host.iconlist[index].num == 1  ? icon.icon : icon.red" mode=""></image>
						   </template>
						</view>
					</view>
				</view>
				<view class="model">
					<image class="device-img" :src="deviceImg" mode=""></image>
				</view>
			</view>
	  	</view>
	  </view>
    </view>
	<view class="device-num">
		<view class="list-tab">
			<view class="tabs" v-for=" tab in tabs" @click="onClickTab(tab.id)" :key="tab.id">
				<view class="dot" v-if="tab.id == 2 && tab.num > 0 "></view>
				<view class="num">{{tab.num}}</view>
				<view>{{tab.name}}</view>
			</view>
		</view>
	</view>
   <view class="page-filter">
      <view class="bd">设备列表</view>
      <!-- <view class="ft">
		全部
        <view
          class="icon"
          :class="{ active: showExtend }"
          @click="showExtend = !showExtend"
        >
          <image
            class="image"
            :src="imgBaseUrlV2 +'arrow.png'"
            mode=""
          />
        </view>
      </view> -->
    </view>

   <view class="equipment-list" v-if="!showExtend">
      <view
        class="item"
        v-for="equipment in dataList"
        :key="equipment.id"
        @click="onClickItem(equipment)"
      >
        <Equipment :equipment="equipment"></Equipment>
      </view>
    </view>

    <view class="equipment-list-other" v-else>
      <view
        class="item"
        v-for="(equipment, eIndex) in dataList"
        :key="equipment.id"
        @click="onClickItem(equipment)"
      >
        <EquipmentOther :equipment="equipment" :key="eIndex"></EquipmentOther>
      </view>
    </view>

    <view class="no-data-box" v-if="!dataList.length">
      <no-data status="no_shebei" title="暂无相关设备"></no-data>
    </view>
    <view class="tips" v-if="dataList.length && dataList.length >= total">
      已无更多
    </view>

    <!-- <x-modal
      v-model="showBinding"
      :title="userInfo.id ? '您还未绑定企业' : '未登录'"
      :content="userInfo.id ? '立即去绑定获取设备数据' : '立即登录查看设备'"
      :confirm-text="userInfo.id ? '去绑定' : '去登录'"
      :show-cancel-button="true"
      @confirm="openBindingEnterprise"
      :z-index="9996"
    ></x-modal> -->

    <Message ref="message"></Message>
  </view>
</template>

<script>
import viewModule from "@/common/mixins/view-module";
import xModal from "@/components/public/x-modal/x-modal";
import circleProgress from "@/components/public/circle-progress/circle-progress";
import {
  // getEquipmentBaseInfo,
  getEquipmentBaseInfo,
  getProlineList,
  getDeviceList,
  getGearboxList,
} from "@/common/api/equipment.js";
import Equipment from "@/components/public/item/equipment";
import EquipmentOther from "@/components/public/item/equipment-other";

import { getEquipmentTypeOptions } from "@/common/api/equipment-type.js";
import { mapState } from "vuex";
import {
  imgBaseUrl,
  imgBaseUrlV0,
  imgBaseUrlV1,
  imgBaseUrlV2,
} from "@/common/config";
import noData from "@/components/public/noData/noData";
import Router from "@/common/js/router";
import statusBar from "@/components/public/status-bar/status-bar";
const system = uni.getSystemInfoSync();
let statusBarHeight = system.statusBarHeight;
// #ifdef MP-WEIXIN
let custom = uni.getMenuButtonBoundingClientRect();
statusBarHeight = custom.top;
// #endif
export default {
  mixins: [viewModule],
  components: {
    noData,
    xModal,
    Equipment,
    EquipmentOther,
    circleProgress,
    statusBar,
  },
  data() {
    return {
      search: "",
      statusBarHeight,
	  showFilter: false,
	  showLine: false,
      dataForm: {
        keyword: "",
      },
      imgBaseUrlV0,
      imgBaseUrlV1,
      imgBaseUrlV2,
      statusOptions: [
        {
          label: "状态",
          value: null,
        },
        {
          label: "在线",
          value: 1,
        },
        {
          label: "离线",
          value: 0,
        },
      ],
      tabs: [
        {
          icon: imgBaseUrl + "shebei_green.png",
          name: "设备异常",
          key: "total",
          id: 2,
        },
        {
          icon: imgBaseUrl + "shebei_blue.png",
          name: "设备数量",
          key: "repair_num",
          id: 3,
        },
        {
          icon: imgBaseUrl + "shebei_red.png",
          name: "设备维保",
          key: "warning_num",
          id: 1,
        },
		{
		  icon: imgBaseUrl + "shebei_red.png",
		  name: "我的关注",
		  key: "atention_num",
		  id: 4,
		}
      ],
      selectStatusTitle: "状态",
      orderType: 0,
      dataInfo: {
        total: 0,
        warning_num: 0,
        repair_num: 0,
      },
	  lineList: [], // 产线列表
	  companyTag: '',
	  DeviceList: [], // 主机列表
	  deviceTag: '',
	  deviceImg: '',
	  GearboxList:[], // 齿轮箱列表
      selectTypes: [],
	  hostList: [],
	  signList: [
		{
			icon: imgBaseUrlV2+ 'home_wendu.png',
			red: imgBaseUrlV2+ 'home_wendu_h.png',
			name: 'wendu'
		},
		{
			icon: imgBaseUrlV2+ 'home_yali.png',
			red: imgBaseUrlV2+ 'home_yali_h.png',
			name: 'yali'
		},
		{
			icon: imgBaseUrlV2+ 'home_shuifen.png',
			red: imgBaseUrlV2+ 'home_shuifen_h.png',
			name: 'shidu'
		},
		{
			icon: imgBaseUrlV2+ 'home_moli.png',
			red: imgBaseUrlV2+ 'home_moli_h.png',
			name: 'moli'
		},
		{
			icon: imgBaseUrlV2+ 'home_niandu.png',
			red: imgBaseUrlV2+ 'home_niandu_h.png',
			name: 'niandu'
		}
	  ],
      hasReset: true,
      showExtend: false,
      showBinding: false,
      mixinViewOptions: {
        getURL: "/gear/box/lists",
        // getURL: "/device2/getDeviceList2",
        isPage: true,
        isShowLoading: false,
        reachBottom: false,
        createdIsNeed: true,
        pullDown: false,
      },
    };
  },
  async mounted() {
    this.onChangePage();
	this.showFilter = false
	this.showLine = false
	this.getProlineList();
    uni.$on("change-page", (index) => {
      if (index == 2) {
        this.onChangePage();
      }
    });
	
  },
  computed: {
    ...mapState("User", ["userInfo"]),
  },
  methods: {
    fetchComplete(err, data = []) {
      data.forEach((i) => {
        i.service_end_time = i.service_end_time
          ? this.$moment(i.service_end_time).format("YYYY-MM-DD")
          : "";
        if (i.service_end_time) {
          let m1 = this.$moment(i.service_end_time);
          let m2 = this.$moment(new Date());
          i.hasSafe = m2.diff(m1, "day") < 0;
        }
      });
    },
    async pullDownRefresh() {
      this.page = 1;
      uni.showLoading({
        title: "加载中",
      });
      await this.initData();
      uni.hideLoading();
      uni.$emit("stopPullDownRefresh");
    },
    pageShow() {
      this.getEquipmentBaseInfo();
      if (this.page == 1) {
        this.getDataList();
      }
    },
    onChangePage() {
      if (!this.userInfo.id) {
        this.dataList.length = 0;
        this.dataList = [];
        this.dataInfo = {
          total: 0,
          warning_num: 0,
          repair_num: 0,
        };
      }
      if (!this.loadingFinish) {
        uni.$emit("showLoading");
      }
      uni.$on("reload-mine", this.onReload);
      this.mixinViewOptions.isShowLoading = false;
      this.initData();
      if (this.loadingFinish) {
        uni.$emit("hideLoading");
      }
    },
    reachBottom() {
      this.mixinViewOptions.isShowLoading = true;
      if (this.dataList.length < this.total) {
        this.page++;
        this.getDataList();
      }
    },
    onReload() {},
    getEquipmentBaseInfo() {
      getEquipmentBaseInfo()
        .then((res) => {
          let data = res.data || {};
          this.dataInfo = data;
		  this.tabs.map(item => {
			if(item.id == 2) {
				item.num = data.warning_num
			}
			if(item.id == 3) {
				item.num = data.total
			}
			if(item.id == 1) {
				item.num = data.repair_num
			}
			if(item.id == 4) {
				item.num = data.follow_num
			}
		  })
          // console.log(res, "??res");
        })
        .catch((err) => {});
    },
    async initData() {
      // this.showBinding = !this.userInfo.id;
      // this.showBinding = true;
      let userInfo = this.userInfo;
      if (!userInfo.id || !userInfo.company_id) {
        this.showModal({
          title: userInfo.id ? "您还未绑定企业" : "未登录",
          content: userInfo.id ? "立即去绑定获取设备数据" : "立即登录查看设备",
          confirmText: userInfo.id ? "去绑定" : "去登录",
          success: (r) => {
            if (r.confirm) {
              this.openBindingEnterprise();
            }
          },
        });
      }
      if (userInfo.id) {
        let arr = [this.getEquipmentBaseInfo(),this.getProlineList()];

        if (userInfo.company_id) {
          arr.push(this.getDataList());
        }
        await Promise.all(arr);
      }
      this.mixinViewOptions.isShowLoading = true;
      uni.$emit("hideLoading");
      this.loadingFinish = true;
      uni.$emit("stopPullDownRefresh");
    },
	
	getDeviceBasicInfo() {
		getDeviceBasicInfo().then(res => {
			if(res.code == 200) {
				console.log(res.data)
			}
		})
	},
	
	onShowFilter() {
	  this.showFilter = !this.showFilter
	  this.showLine = false
	},
	onShowLine() {
	  this.showFilter = false
	  this.showLine = !this.showLine
	},
	
	getProlineList() {
		getProlineList().then(res => {
			if(res.code == 200) {
				let data = res.data.list
				this.lineList = res.data.list
				this.getDeviceList(data[0].id)
				this.companyTag = data[0].factoryName+ data[0].name
				
				// this.deviceTag = this.DeviceList[0].name
			}
		})
	},
	getDeviceList(id, idx) {
		getDeviceList({params:{productLinesId:id}}).then(res => {
			if(res.code == 200) {
				let data = res.data.list
				this.DeviceList = res.data.list
			    this.deviceTag = data[0].name
				this.deviceImg = this.DeviceList[0].pic
			    this.getGearboxLists(data[0].id)
			}
		})
	},
	getGearboxLists(id) {
		getGearboxList({params:{deviceHostId:id}}).then(res => {
			if(res.code == 200) {
				let data = res.data.list
				let arr = []
				// this.GearboxList = res.data.list
				this.GearboxList = data.map((item,num) => {
					arr = this.signList.map((n, index)=> {
							for(let i in item.sign) {
								if(i == n.name) {
								  return {
									...n,
									num: item.sign[i]
								  }
								}
							}
						})
					return {
					  ... item,
					  iconlist: arr
					}
					// console.log(this.signList)
				})
				console.log(this.GearboxList)
			}
		})
	},
	
	onConfirmFilter(i,index) {
	  this.showFilter = false;
	  // console.log(i,'i')
	  this.companyTag = i.factoryName + i.name
	  this.getDeviceList(i.id)
	},
	onOptionLine(i,idx) {
	  this.showLine = false;
	  this.deviceImg = this.DeviceList[idx].pic
	  this.deviceTag = this.DeviceList[idx].name
	  this.getGearboxLists(this.DeviceList[idx].id)
	},
    openPage(url) {
      Router.push({
        path: url,
      });
    },
	
	onClickTab(id) {
	    this.openEquipmentList(id)
	},
	openEquipmentList(type) {
	  switch (type) {
	    case 2: // 设备异常
	      break;
	    case 1: // 即将维保
	      break;
	    case 3: // 设备数量
	    	break;
	    case 4: // 我的关注
	    	break;
	  }
	
	  uni.navigateTo({
	    url: "/pages/equipment-list/equipment-list?type=" + type,
	  });
	},
	
    onClickItem(item) {
      if (!this.$hasPermission("Device/basic")) {
        return this.message.error("无权限查看详情!");
      }
      Router.push({
        path: "/pageA/equipment-detail/index",
        query: {
          id: item.deviceId,
        },
      });
    },
    onDevice(type = "") {
      Router.push({
        path: "/pages/equipment-list/equipment-list",
        query: {
          type,
        },
      });
    },
    openBindingEnterprise() {
      if (this.userInfo.id) {
        this.openPage("/pages/enterprise-binding/enterprise-binding");
      } else {
        // this.openPage("/pages/login-by-phone/login-by-phone");
        this.openPage("/pages/login/index");
      }
    },
  },
  destroyed() {
    uni.$off("reload-mine");
    uni.$off("change-page");
    uni.$off("changeDeviceType");
  },
};
</script>

<style lang="stylus" scoped>
@import '~@/common/stylus/variable';
@import '~@/common/stylus/mixins';

.page {
  padding-bottom: 150rpx;
  min-height: 100vh;
  box-sizing: border-box;
  background: linear-gradient(180deg, #0D1523 0%, #102945 100%);
}

.no-data-box {
  padding: 30rpx 0;
}

.page-head {
  position: fixed;
  width: 100%;
  line-height: 64rpx;
  left: 0;
  top: 0;
  z-index: 998;
  text-align: center;
  font-size: 36rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  transition: all 0.3s;
  color: #fff;
  background: #4B5472;
  box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.12);
  padding-bottom: 12rpx;
}

/* #ifdef H5 */
.page-head {
  padding-top: 12rpx;
}

/* #endif */
.head-polyfill {
  /* #ifdef H5 */
  margin-bottom: 12rpx;
  /* #endif */
}

.equipment-list {
  // background-color: #f5f5f5; // 解决selector收回样式问题
  padding: 20rpx;

  .item {
    padding: 26rpx 16rpx;
    background: linear-gradient(270deg, #112849 0%, #153D6E 100%);
    border-radius: 10rpx;
    flex-direction: row;
    margin-bottom: 20rpx;
    overflow: hidden;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.device-status {
  //display: flex;
  padding: 24rpx;
  position:relative;
  .device-bg {
	width 100%;
	position: absolute;
	bottom: -20rpx;
	left:0;
	z-index:1;
  }
  .check-box {
	  width:100%;
	  color:#fff;
	  display: flex;
	  position: relative;
	  z-index: 3;
	>.ft {
	  
	  display: flex;
	  flex: 0 0 auto;
	  margin-right: 15rpx;
	  .icon {
	    display: block;
	    width: 30rpx;
	    height: 30rpx;
	    margin-left: 10rpx;
	    transition: all 0.3s;
	
	    &.active {
	      transform: rotate(180deg);
	    }
	  }
	
	  >.text {
	    display: flex;
	    align-items: center;
	  }
	
	  .filter {
	    position: absolute;
	    top: 120%;
	    z-index: 3;
	    padding-top: 12rpx;
	    .options {
	      border-radius: 10rpx;
	      background: rgba(0, 0, 0, 0.7);
	      padding: 16rpx;
	      .option {
	        height: 50rpx;
	        line-height: 50rpx;
	        text-align: left;
	        color: #fff;
			font-size:28rpx;
	      }
	    }
	
	    .after {
	      position: absolute;
	      content: '';
	      width: 0;
	      height: 0;
	      top: 0;
	      right: 0;
	      left: 0;
	      margin: auto;
	      border-left: 10rpx solid transparent;
	      border-right: 10rpx solid transparent;
	      border-bottom: 12rpx solid rgba(0, 0, 0, 0.7);
	    }
	  }
	}
  }
  .device {
	widht:100%;
	.device-box {
		color: color-white;
		.device-title {
			display:inline-block;
			margin: 15rpx 0; 
			position:relative;
		    padding: 10rpx 57rpx 10rpx 53rpx;
			.title-img {
				position:absolute;
				top:0;
				left: 0;
				width: 100%;
			}
		}
		.bd {
			display:flex;
			height: 500rpx;
			.host {
				width:60%;
				margin-top:14%;
				.host-list {
					width: 100%;
					display:flex;
					margin-bottom: 36rpx;
					.list {
						width: 155rpx;
						height: 155rpx;
						border-radius: 50%;
						background: linear-gradient(270deg, #112849 0%, #153d6e 100%);
						display: flex;
                        align-items: center;
						position: relative;
						.host-img{
							max-width: 100%;
							height: 58%!important;
							display:block;
							position:relative;
							z-index : 3;
						}
						.rotate {
							position: absolute;
							top: 0;
							left: 0;
							z-index: 1;
							display: block;
							width: 155rpx;
							height:155rpx!important;
							border-radius:50%;
							animation: rotate 2s infinite linear forwards;
						}
					}
					.info {
						display:flex;
						flex-wrap: wrap;
						margin-left: 15rpx;
						.icon {
							width:52rpx;
							height 52rpx;
							margin-left: 15rpx;
						}
					}
				}
			}
			.model {
				width: 50%;
				.device-img {
					width: 100%;
					height: 68%;
					margin-top:28%
				}
			}
		}
	}
  }
}
@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(359deg);
  }
}
.page-filter {
  display: flex;
  padding: 16rpx 24rpx;
  font-size: 36rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: bold;
  color: color-white;

  >.bd {
    flex: 1;
  }

  >.ft {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
    >.icon {
      width: 32rpx;
      height: 32rpx;

      >.image {
        display: block;
        width: 32rpx;
        height: 32rpx;
      }

      &.active {
        >.line:last-child {
          width: 16rpx;
        }

        >.line:nth-child(2) {
          // width: 24rpx;
        }
      }

      >.line {
        width: 32rpx;
        height: 4rpx;
        border-radius: 4rpx;
        background: #999;
        margin-bottom: 8rpx;
        transition: all 0.3s;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

.device-num {
	padding: 20rpx;
	.list-tab {
		padding: 26rpx 16rpx;
		background: linear-gradient(270deg, #112849 0%, #153D6E 100%);
		border-radius: 10rpx;
		flex-direction: row;
		margin-bottom: 20rpx;
		overflow: hidden;
		flex:1;
		display: flex;
		justify-content :space-around;
		.tabs {
			color: #fff;
			text-align :center;
			line-height :70rpx;
			position : relative;
			font-size 30rpx;
			.dot {
				width:15rpx;
				height :15rpx;
				position : absolute;
				top: 0;
				right : 12rpx;
				background-color:#DC2A2A;
				border-radius: 50%;
			}
			.num {
				font-size :50rpx;
			}
		}
	}
}

.equipment-list-other {
  display: flex;
  padding: 0 24rpx;
  flex-wrap: wrap;

  >.item {
    flex: 0 0 162rpx;
    height: 100px;
    background: #fff;
    padding: 14rpx;
    margin-right: 16rpx;
    margin-bottom: 16rpx;
    border-radius: 10rpx;

    &:nth-child(4n) {
      margin-right: 0;
    }
  }
}
</style>
